﻿<template>
	<transition name="el-zoom-in-center">
		<div class="SHZY-preview-main" v-loading="loading" element-loading-text="处理中..."
			element-loading-spinner="el-icon-loading">
			<div class="SHZY-common-page-header">
				<el-page-header @back="goBack" content="打印" />
				<div class="options">
					<el-button type="success" icon="el-icon-view" @click="printLabelPerview()">预 览</el-button>
					<el-button type="primary" @click="LabelPrint()" icon="el-icon-document">PDF打印</el-button>
					<el-button type="primary" @click="zplPrint()" icon="el-icon-printer">打 印</el-button>
					<el-button @click="goBack">返 回</el-button>
				</div>
			</div>
			<div :style="{ margin: '0 auto', width: '100%' }">
				<el-row :gutter="15" class=" main">
					<el-form ref="elForm" :model="dataForm" size="medium" label-width="80px" label-position="top"
						:rules="rules">
						<el-col :span="6">
							<el-form-item label="做番号" prop="no">
								<el-input v-model='dataForm.no' clearable readonly :style='{ "width": "100%" }'>
								</el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="图号" prop="drawingNo">
								<el-input v-model='dataForm.drawingNo' clearable readonly :style='{ "width": "100%" }'>
								</el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="部件名称" prop="componentName">
								<el-input v-model='dataForm.componentName' clearable readonly
									:style='{ "width": "100%" }'>
								</el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="规格" prop="specifications">
								<el-input v-model='dataForm.specifications' clearable readonly
									:style='{ "width": "100%" }'>
								</el-input>
							</el-form-item>
						</el-col>

						<el-col :span="6">
							<el-form-item label="产品型号" prop="model">
								<el-input v-model='dataForm.model' clearable readonly :style='{ "width": "100%" }'>
								</el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="箱号" prop="boxNo">
								<el-input v-model='dataForm.boxNo' clearable readonly :style='{ "width": "100%" }'>
								</el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="数量" prop="qty">
								<el-input v-model='dataForm.qty' clearable placeholder='请输入数量'
									:style='{ "width": "100%" }' required @input="handleChange">
								</el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="包装数量" prop="packageQty">
								<el-input v-model='dataForm.packageQty' readonly placeholder='' clearable
									:style='{ "width": "100%" }'>
								</el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="打印数量" prop="printQty">
								<el-input v-model='dataForm.printQty' placeholder='请输入打印数量' clearable
									:style='{ "width": "100%" }'>
								</el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="打印机" prop="printerIp">
								<el-select v-model="dataForm.printerIp" placeholder="请选择打印机" clearable required
									:style="{ width: '100%' }" filterable>
									<el-option v-for="(item, index) in printList" :key="index" :label="item.printerName"
										:value="item.printerIp"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-card class="mb-20" shadow="always">
								<el-col :span="24">
									<el-form-item label-width="0">
										<img :src="imgurl" />
									</el-form-item>
								</el-col>
							</el-card>
						</el-col>
					</el-form>
				</el-row>
			</div>
		</div>
	</transition>
</template>
<script>
import restAPI from '@/api/q1/business/pick';
import { GetPrinterAll } from '@/api/common/printerConfig'
export default {
	components: {},
	props: [],
	data() {
		return {
			loading: false,
			visible: false,
			imgurl: '',
			printList: [],
			printConfigId: '564705291665845573',
			dataForm: {
				formDataId: '', // 业务id(用于查询数据源)
				formCustomerId: '',  // 客户id
				printConfigId: '', //打印配置id
				printQty: 0, // 打印数量
				packageQty: '', // 包装数量
				no: '', // 做番号
				drawingNo: '', // 图号
				componentName: '', // 部件名称
				specifications: '',  // 规格
				model: '',  // 产品型号
				boxNo: '',  // 箱号
				formPrintType: '',  // 打印类型
				qty: '',  // 数量
				printerIp: '', // 打印机
			},
			Printdata: {
				CustomerId: '', // 打印记录的CustomerId
				EventCode: '', // 打印事件Code
				OrderNo: '',  // 订单编号
				MaterialId: '', // 物料Id
				MaterialCode: '', // 物料编码
				MaterialName: '', // 物料名称
				Specification: '', // 规格
				BatchNo: '', // 生产批次
				PackgeNum: 0, // 包装数量
				PrintQty: 0,  // 数量
			},
			rules: {
				qty: [
					{
						required: true,
						message: '请输入包装数量',
						trigger: '"blur"'
					},
					{
						pattern: /^[1-9]\d*$/,
						message: '请输入正确的数量',
						trigger: '"blur"'
					},
				],
				printQty: [
					{
						pattern: /^[1-9]\d*$/,
						message: '打印数量最小为1',
						trigger: '"blur"'
					},
				],
			},
		}
	},
	computed: {},
	watch: {},
	created() {
		this.init();
		this.getPrinterData();
	},
	mounted() {
	},
	methods: {
		goBack() {
			this.$emit('refresh',true)
		},
		getPrinterData() {
			GetPrinterAll().then(res => {
				this.printList = res.data.list;
			});
		},
		init(data) {
			this.visible = true;

			this.$nextTick(() => {
				this.$refs['elForm'].resetFields();
				this.dataForm = data;
			});
		},

		//预览
		printLabelPerview() {
			this.$refs['elForm'].validate((valid) => {
				if (valid) {
					this.loading = true;
					let query = {
						exportType: 0,
						IsSaveLog: true,
						data: {
							formDataId: this.dataForm.formDataId,
							printConfigId: this.printConfigId,
							formCustomerId: "",
							printQty: Number(this.dataForm.printQty),
							packageQty: this.dataForm.qty,
							formQty: this.dataForm.qty,
							printerIp: ""
						}
					}
					restAPI.PrintPreview(query).then((res) => {
						this.loading = false;
						const blob = new Blob([res], { type: 'image/jpeg' })
						const url = window.URL.createObjectURL(blob)
						this.imgurl = url;
						// window.open(`${url}#filename=Zy`, "_blank")
					}).catch((res) => {
						this.loading = false;
					})
				}
			})
		},
		LabelPrint() {
			this.$refs['elForm'].validate((valid) => {
				if (valid) {
					this.loading = true;

					let query = {
						exportType: 1,
						IsSaveLog: true,
						data: {
							formDataId: this.dataForm.formDataId,
							printConfigId: this.printConfigId,
							formCustomerId: "",
							printQty: Number(this.dataForm.printQty),
							packageQty: this.dataForm.qty,
							formQty: this.dataForm.qty,
							printerIp: ""
						}
					}

					restAPI.PrintSingle(query).then((res) => {
						this.loading = false;
						if (res.byteLength>117) {
							const blob = new Blob([res], { type: 'application/pdf' })
							const url = window.URL.createObjectURL(blob)
							window.open(`${url}#filename=Zy`, "_blank")
						} else {
							this.$message({
								message: "当前装箱单已打印,请勿重复打印!",
								type: "error",
								duration: 1000
							});

						}

					}).catch((res) => {

						this.loading = false;
					})
				}
			})
		},
		zplPrint() {
			this.$refs['elForm'].validate((valid) => {
				if (valid) {
					if (!this.dataForm.printerIp) {
						this.$message({
							message: '请选择打印机',
							type: "warning",
							duration: 1000
						});
						return;
					}
					this.loading = true;

					let query = {
						exportType: 2,
						IsSaveLog: true,
						data: {
							formDataId: this.dataForm.formDataId,
							printConfigId: this.printConfigId,
							formCustomerId: "",
							printQty: Number(this.dataForm.printQty),
							packageQty: this.dataForm.qty,
							formQty: this.dataForm.qty,
							printerIp: this.dataForm.printerIp,
							eventCode:"zx"
						}
					}

					restAPI.PrintZpl(query).then((res) => {
						this.loading = false;

					}).catch((res) => {
						this.loading = false;
						this.$message({
							message: res.msg,
							type: "error",
							duration: 1000
						});
					})
				}
			})
		},


		resetForm() {
			this.$refs['elForm'].resetFields()
			this.init()
		},


		handleChange(e) {
			this.dataForm.qty = e.replace(/\D/g, '') == '' ? '' : parseInt(e);

			this.dataForm.packageQty = this.dataForm.qty;
		}
	}
}
</script>
